import qs from 'qs'
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import "videojs-flash";
import videojs from "video.js";
import SWF_URL from "../../../../node_modules/videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

export default {
    name: 'Fourmode',
    components: {
        videoPlayer,
    },
    data() {
        return {
            rowKeyData: this.$route.params.rowKeyData,
            deviceTypeData: this.$route.params.deviceTypeData,
            playerOptions: [],
            reply: {},
            img_ac: true,
            dataMsg: {},
            isShow: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.init();
    },
    mounted() {

    },
    methods: {
        init() {
            if (this.rowKeyData == undefined || this.rowKeyData == "") {
                this.$message.error("至少选择一个设备");
                return false;
            } else {
                var rowKey = this.rowKeyData.join(",");
                var deviceType =this.deviceTypeData.join(",");
                console.log(rowKey);
                console.log(deviceType);
                this.$http.post("/deviceCommonInfoController/queryRtmpUrl",qs.stringify({rowkeys:rowKey,deviceTypes:deviceType}))
                    .then((res) => {
                        if (res.status == 200) {
                            this.reply = res.data;
                            for (var i in this.reply) {
                                console.log(this.reply[i].deviceRtmpDownloadUrl);
                                let arrStr = {
                                    //可选的播放速度
                                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                                    heihgt: "500",
                                    width: "700",
                                    autoplay: true, //如果true,浏览器准备好卡开始回放，
                                    muted: false, // 默认情况下将会消除任何音频。
                                    loop: false, // 视频一结束就重新开始。
                                    preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                                    language: "zh-CN",
                                    poster: require("../../../../static/images/picture1.png"), //没有播放时图片
                                    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                                    html5: { hls: { withCredentials: false } },
                                    sources: [
                                        {
                                            type: "rtmp/flv",
                                            src: this.reply[i].deviceRtmpDownloadUrl //url地址
                                        }
                                    ],
                                    techOrder: ["flash"],
                                    // controlBar: {
                                    //     timeDivider: false,
                                    //     durationDisplay: false,
                                    //     remainingTimeDisplay: false,
                                    //     currentTimeDisplay: false, // 当前时间
                                    //     volumeControl: true, // 声音控制键
                                    //     playToggle: false, // 暂停和播放键
                                    //     progressControl: true, // 进度条
                                    //     fullscreenToggle: true // 全屏按钮
                                    // }
                                };
                                this.playerOptions.push(arrStr);
                            }
                        }
                    }).catch((err) => {
                        console.log(err);
                    });
            }
        },
        onPlayerReadied(player) { }
    },
}